*{
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 四列布局 */
/* 背景 */
.back{
    height: 738px;
    background-color: #f4f0ea;
    padding: 60px 0;
    }
    /* 居中显示 */
 .center{
     width: 1090px;
     height: 570px;
     margin: 0 auto;
}
/* 左侧内容 */
.left{
 width: 390px;   
 height: 570px;
 background-color: cornflowerblue;
 float: left;
}
/* 右侧内容 */
.right{
width: 691px;   
 height: 570px;
 float: right;
}
.right ul li{
    width: 223px;
    height: 280px;
    background-color: rgb(216, 211, 205);
    /* display: inline-block; */
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}
/* 选中第三和第六个 */
.right ul li:nth-child(3),
.right ul li:nth-child(6){
    margin: 0;
}
.right ul li:nth-child(4)，
.right ul li:nth-child(5){
    margin-bottom: 0;
}




/* 动画布局 */
/* 窗口 */
.wrap{
    width: 400px;
    height: 300px;
    border: 1px solid red;
    margin: 100px auto;
    /* 把超出容器部分隐藏 */
    /* overflow: hidden; */
}
/* 光标移到容器上时暂停动画 */
.centent:hover{
    cursor: pointer;
    animation-play-state: paused;
}
.centent{
    width: 1600px;
    height: 300px;
    animation: move 5s infinite steps(4);
    /* border: 1px solid black; */
    /* background-color: burlywood; */
    /* margin-left: -400px; */
    /* move是动画名称，2s是持续时长，infinite是次数 steps是逐帧播放*/
    /* 动画名称 */
    /* animation-name: move; */
    /* 动画播放时长 */
    /* animation-duration: 2s; */
    /* 动画播放速度 */
    /* animation-timing-function: linear; */
    /* 动画播放次数 */
    /* animation-iteration-count: infinite; */
    /* 动画延迟时间 */
    /* animation-delay: 4s; */
    /* 动画填充模式 */
    /* animation-fill-mode: backwards; */
    /* animation-fill-mode在动画有限次时才起作用 */
    /* 播放状态 */
    /* animation-play-state: paused; */
    /* 动画运动方向 */
    /* animation-direction: alternate; */
}
.centent ul li{
    width: 400px;
    height: 300px;
    float: left;
    background-image: url(https://yanxuan-item.nosdn.127.net/0ae4a38da4f742b01a89dd840f7239d6.png?type=webp&imageView&quality=95&thumbnail=355x355
    );
    background-size: 100% 100%;
}
/* .centent ul li:nth-child(even){
    background-color: brown;
} */
/* odd是奇数，even是偶数 */
/* keyframes加动画 */
/* 动画定义 */
@keyframes move{
    from{
        /* from从。。。改变某属性 */
        margin-left: 0;
    }
    to{
        /* to变成某属性 */
        margin-left: -1600px;
    }
}
/* 如果使用匀速播放，则margin-left：-1200px */
/* 如果使用逐帧播放，则margin-left：-1600px */ 